<template>
  <div>
    <div class="outputField_title">输出字段列表</div>
    <a-table 
      :columns="columns" 
      :data-source="columnsTable" 
      :pagination="false"
      rowKey="index"
      size="middle"
    >
      <span slot="action" slot-scope="row">
        <a @click="onUpdateOutput(row)">编辑</a>
      </span>
    </a-table>

    <a-modal v-model="visible" title="编辑输出字段" @ok="handleOk" okText="确定" cancelText="取消" :maskClosable="false">
      <!-- 表单 -->
      <a-form-model
        ref="ruleForm"
        :model="form"
        :rules="rules"
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 18 }"
      >
        <!-- 字段名 -->
        <a-form-model-item label="字段名">
          <div> {{form.name}} </div>
          <!-- <a-input v-model="form.name" placeholder="请输入字段名" disabled /> -->
        </a-form-model-item>
        <!-- 显示名 -->
        <a-form-model-item label="显示名" prop="displayName">
          <a-input v-model="form.displayName" placeholder="请输入显示名"/>
        </a-form-model-item>
      </a-form-model>
    </a-modal>

  </div>
</template>

<script>
import { mapActions, mapMutations, mapState } from 'vuex'
const columns = [
    { 
      title: '字段名', 
      dataIndex: 'name', 
      align: 'center'
    },
    { 
      title: '字段显示名', 
      dataIndex: 'displayName', 
      align: 'center'
    },
    {
      title: '操作',
      align: 'center',
      scopedSlots: { customRender: 'action' },
      width: 100
    }
]
  export default {
    data() {
      return {
        columns,
        columnsTable: [],
        indicators: [],
        visible: false,
        rules: {
            displayName : [ 
                { required :true, message: '请输入显示名', trigger: 'blur' },
                { max: 100, message: '最大长度为100个字符', trigger: 'blur'  }
            ]
        },
        form: {
            name: '',
            displayName: ''
        }
      }
    },
    props: ['outputForm'],
    watch: {
        columnsTable : {
            handler (val) {
                this.outputForm.output = JSON.parse(JSON.stringify(val));
            },
            deep: true
        },
        visible (val) {
            if (!val) {
                this.form = {}
            }
        }
    },
    computed: {
        ...mapState('custom', ['reportForm']),
        ...mapState('analyseType', ['events', 'measures', 'propertiesEvent', 'propertiesUser']),
        properties () {
            return [ ...this.propertiesEvent, ...this.propertiesUser ]
        },
        eventMap: function() {
            let eventMap = {};
            eventMap['Any'] = {
                name: 'Any',
                displayName: '任意事件'
            };
            for(let i = 0; i < this.events.length; i++) {
                eventMap[this.events[i].name] = this.events[i];
            }
            return eventMap;
        },
        measureMap: function() {
            let measureMap = {};
            for(let i = 0; i < this.measures.length; i++) {
                measureMap[this.measures[i].name] = this.measures[i];
            }
            return measureMap;
        },
        propertyMap: function() {
            let propertyMap = {};
            for(let i = 0; i < this.properties.length; i++) {
                propertyMap[this.properties[i].name] = this.properties[i];
            }
            return propertyMap;
        }
    },
    methods: {
        updateTableColumns () {
            this.columnsTable.splice(0, this.columnsTable.length);
            const config = this.outputForm.config.config;
            if ( config.dimension !== "" && config.dimension in this.propertyMap ) {
                this.columnsTable.push({
                    name: config.dimension.toLowerCase(),
                    displayName: this.propertyMap[config.dimension].displayName,
                    index: this.columnsTable.length
                });
            }
            for (let i = 0; i < config.funnel.steps.length; i++) {
                let k = config.funnel.steps[i].event + "_" + config.funnel.steps[i].order;
                k = k.toLowerCase()
                this.columnsTable.push({
                    name: k,
                    displayName: config.funnel.steps[i].name,
                    index: this.columnsTable.length
                });
            }
        },
        onUpdateOutput (row) {
            this.visible = true
            this.form = { ...row }
        },
        handleOk () {
            this.$refs.ruleForm.validate(valid => {
                if (valid) {
                    this.columnsTable.splice(this.form.index, 1, JSON.parse(JSON.stringify(this.form)))
                    this.visible = false
                }
            });
        }
    },
    mounted() {
        let editBefore = [...this.outputForm.output],
            outputfield = [];
        this.updateTableColumns()
        this.columnsTable.forEach(column => {
            let index = editBefore.findIndex(value => {
                return column.name == value.name;
            })
            if (index > -1) {
                outputfield.push(editBefore[index])
            } else if (index == -1) {
                outputfield.push(column)
            }
        })
        this.columnsTable = outputfield;
    },
  }
</script>

<style scoped>
.outputField_title{
  font-size: 16px;
  font-weight: 500;
  color: rgba(0,0,0,.85);
  margin-bottom: 24px;
  margin-top: 12px;
}
</style>